/**
 * Created by mac on 2017/7/4.
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    Image,
    ActivityIndicator
} from 'react-native';

import {CachedImage} from "react-native-img-cache";

//cat 数据
let middleAdvsData = require('./data.json').data.recommendChannel.recommendActivitys;

var screenW = Dimensions.get('window').width;

import SectionBar from './SectionBar';


let scrollX = 0;
let i = 0;
let left = true;
let drag = false;
let paddingWidth = 5;
let imageWidth = 232
let imageHeight = 163
let viewWidth = imageWidth + paddingWidth*2;
let viewHeight = imageHeight + paddingWidth*2;

let touchX = 0;
let ScrollEndX = 0;

let onSroll = true;


export default class ScrollCard extends Component{

    // 构造
    constructor(props) {
        super(props);
        this.renderDetailView=this.renderDetailView.bind(this);

        let data = middleAdvsData.items;

        let images = [];
        for (let i=0;i<data.length;i++){

            let scale = i==1?1:0.9;
            images.push(scale);
        }

        // 初始状态
        this.state = {
            images:images,
            left:(screenW-viewWidth)/2,

        };
    }



    renderDetailView(allData){

        let data = allData.items;

        var row= [];

        if(data.length === 0){
            return (
                <View style={{flex:1}}>
                    <ActivityIndicator size='large' color='gray'/>
                </View>
            )
        }

        for (let i=0;i<data.length;i++){



            row.push(
                <View style={{padding:5,flex:1,justifyContent:'center', alignItems:'center'}}>
                    <CachedImage key={i}  style={{
                        minWidth:imageWidth*0.9,
                        maxWidth:imageWidth,
                        minHeight:imageHeight*0.9,
                        maxHeight:imageHeight,
                        width:imageWidth,
                        height:imageHeight,
                        transform:[{scaleX:this.state.images[i]},{scaleY:this.state.images[i]}]
                    }}
                           source={{uri:data[i].pic}}/>
                </View>
            )

        }

        return(

                <ScrollView contentContainerStyle={{flexDirection:'row', width:data.length*viewWidth,height:viewHeight}}
                            horizontal={true}
                            ref={c=>{this.scrollView=c}}
                            contentOffset={{x:viewWidth-(screenW-viewWidth)/2,y:0}}
                            scrollEventThrottle={1}
                            onScrollBeginDrag={
                                (c)=>{
                                    console.log('onScrollBeginDrag');
                                    drag = true;
                                    onSroll = false;
                                scrollX = c.nativeEvent.contentOffset.x;

                                i = parseInt((scrollX+(screenW-viewWidth)/2+10)/viewWidth);
                                }}
                            onScrollEndDrag={
                                (c)=>{

                                    if (onSroll == false){
                                        return;
                                    }

                                    console.log('onScrollEndDrag');

                                    console.log(screenW);

                                    drag = false;



                                    let images = this.state.images;

                                    if (left == true){



                                        if (i== 0){

                                            return;
                                        }

                                        images[i-1] = left?1:0.9;
                                        images[i] = left?0.9:1;


                                    }
                                    else {

                                        if (i == data.length -1){

                                            return;
                                        }

                                        images[i] = left?1:0.9;

                                        images[i+1] = left?0.9:1;


                                    }



                                    this.setState({
                                        images: images,
                                    })


                                    ScrollEndX = left?((viewWidth-(screenW-viewWidth)/2)+(i-2)*viewWidth):((viewWidth-(screenW-viewWidth)/2)+i*viewWidth);
                                    this.scrollView.scrollTo({x:ScrollEndX,animated:false});

                                }
                            }
                            onScroll={
                                e=>{

                                    onSroll = true;
                                    console.log('onScroll');
                                    if (drag == true) {

                                        console.log(i);

                                        let x = e.nativeEvent.contentOffset.x;

                                        console.log(x - scrollX);

                                        console.log('x='+ x);

                                        console.log('scrollX='+ scrollX);


                                        let images = this.state.images;

                                        if ((x - scrollX) >= 0) {

                                            console.log('left');

                                            left = false;

                                            if (i == data.length -1){
                                                return;
                                            }

                                        }
                                        else {

                                            console.log('right');

                                            left  = true;

                                            if (i== 0){
                                                return;
                                            }


                                        }

                                        this.setState({
                                            images: images,
                                        })

                                        scrollX = x;
                                        console.log(scrollX);

                                    }

                            }}
                             onMomentumScrollEnd={e=>{

                                 console.log(left);




                             }}
                            alwaysBounceHorizontal={true}
                            bounces={false}
                            style={{width:screenW,height:173,overflow:'visible'}}
                >
                    {row}

                </ScrollView>
        )

    }

    render(){

        return (
            <View style={{width:screenW,height:203,justifyContent:'center', alignItems:'center'}}>
                <SectionBar title={middleAdvsData.title}/>
                {this.renderDetailView(middleAdvsData)}
            </View>
        )
    }
}